<link rel="stylesheet" type="text/css" href="__CDN__/static/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__CDN__/static/css/login.css"/>
<div id="content-container-login" >

    <div class="row rowClass" >
        <div style="position: absolute; top: 65px; left: 50px;">
            {if $site.b_logo}
            <img src="{$site.b_logo}" style="width: 150px" alt="Logo">
            {else}
            <img style="width: 150px"
                 src="https://img0.baidu.com/it/u=933220220,287299241&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                 alt="Logo">
            {/if}
        </div>
<!--        <div class="closeCLass close-modal"> <i class="fa fa-close"></i></div>-->
        <div class="col-lg-6 d-flex align-items-center justify-content-center">
            <div class="login-main form-vertical  flexClass">
                <div class="flexClasstext">微信登录</div>
                <div class="flexClassImg">
                    <img style="width: 210px;height: 210px;border-radius: 30px;"
                         src="https://img0.baidu.com/it/u=582752653,3386538207&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500"
                         alt="">
                </div>
                <div class="flexClasst">使用微信扫一扫登录</div>
            </div>
        </div>
        <div class="user-section  login-section col-lg-6">
            <div class="logon-tab">
                <div class="active">登录</div>
                <a class="register" id="showRegister" >去注册</a>
            </div>
            <div class="login-main">
                <div class="row tabClass">
                    <div class="col-md-3"><p id="passwordLoginBtn" class="btn-for" >账号密码</p>
                    </div>
                    <div class="col-md-3"><p id="smsLoginBtn" class="btn-for">短信验证码</p></div>
                </div>
                <form name="form" id="login-form" class="form-vertical" method="POST" action="">
                    <!--@IndexLoginFormBegin-->
                    <input type="hidden" name="url" id="url" value="{$url|htmlentities}"/>
                    <input type="hidden" name="loginType" id="loginType" value="0">
                    {:token()}
                    <div class="form-group">
                        <!--                        <label class="control-label" for="account">{:__('Account')}</label>-->
                        <div class="controls">
                            <input class="form-control" id="account" type="text" name="account" value=""
                                   data-rule="required" placeholder="请输入手机号/账号名" autocomplete="off">
                            <div class="help-block"></div>
                        </div>
                    </div>
                    <div class="form-group" id="passwordLoginForm">
                        <!--                        <label class="control-label" for="password">{:__('Password')}</label>-->
                        <div class="controls">
                            <input class="form-control" id="password" type="password" name="password"
                                   data-rule="required;password" placeholder="请输入登录密码" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group" id="smsLoginForm" style="display: none">
                        <div class="codeClass">
                            <div>
                                <input class="colmd7" id="captcha" type="text" name="code"
                                       data-rule="required" placeholder="请输入验证码" autocomplete="off">
                            </div>
                            <div>
                                <button id="sendCodeBtn" type="button" class="colmd4" data-url="{:url('api/sms/send')}"
                                        data-type="mobile" data-event="">发送验证码
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" onclick="login()" class="btn-primaryClass">{:__('Sign in')}</button>
                    </div>
                    <div class="form-group">
                        <div style="width: 390px;margin-top: 10px">
                            <p id="showForget" class="forPassword">忘记密码</p>
                        </div>
                    </div>

                    <div class="form-group-checkbox">
                        <input type="checkbox" class="basic-checkbox"  name="keeplogin" value="1">
                        <div style="margin-left: 10px; height: 45px;">已阅读并同意用户协议和 隐私政策</div>
                    </div>
                    <!--@IndexLoginFormEnd-->
                </form>
            </div>
        </div>
    </div>
</div>

<script src="__CDN__/static/js/jquery.min.js"></script>
<script src="__CDN__/static/layer/layer.js"></script>

<script>
    $(document).ready(function () {
        $('#smsLoginForm').hide();
        $('#passwordLoginBtn').addClass('btn-forgot');
        // 短信登录按钮点击事件
        $('#smsLoginBtn').click(function () {
            $('#smsLoginForm').show();
            $('#passwordLoginForm').hide();
            $("#loginType").val(1);
            $('#smsLoginBtn').addClass('btn-forgot');
            $('#passwordLoginBtn').removeClass('btn-forgot');
            $("#account").attr('placeholder','请输入手机号');
        });

        // 密码登录按钮点击事件
        $('#passwordLoginBtn').click(function () {
            $('#passwordLoginForm').show();
            $('#smsLoginForm').hide();
            $("#loginType").val(0);
            $('#passwordLoginBtn').addClass('btn-forgot');
            $('#smsLoginBtn').removeClass('btn-forgot');
            $("#account").attr('placeholder','请输入手机号/用户名');


        });
        // 给发送验证码按钮绑定点击事件
        $('#sendCodeBtn').click(function () {

            $.post("{:url('api/sms/send')}", {mobile: $("#account").val(), event: 'login'}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg);

                    // 禁用按钮
                    $("#sendCodeBtn").prop('disabled', true);
                    let countdown = 60; // 设置倒计时时间（秒）
                    let timer = setInterval(function () {
                        // 更新按钮文本显示倒计时
                        $('#sendCodeBtn').text(countdown + '秒后可重新发送');
                        countdown--;
                        if (countdown < 0) {
                            clearInterval(timer);
                            // 倒计时结束，恢复按钮文本和可点击状态
                            $('#sendCodeBtn').text('发送验证码');
                            $('#sendCodeBtn').prop('disabled', false);
                        }
                    }, 1000);
                } else {
                    layer.msg(res.msg);
                    return;
                }
            })


        });
    });

    function login(){
        var currentURL = window.location.href;
        console.log(currentURL);
        $("#url").val(currentURL);
        var params = $("#login-form").serialize();
        $.post("{:url('index/user/login')}", params, function (res) {
            if (res.code == 1) {
                layer.msg(res.msg,{time: 2000,}, function () {
                    layer.closeAll();//疯狂模式，关闭所有层
                     location.href=res.url;
                })
            } else {
                layer.msg(res.msg);
                return;
            }
        })
    }
</script>
